<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="utf-8">
    <title>--code--</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/search.css}" media="all">
    <script language=javascript th:src='@{/js/jquery-3.4.1.js}'></script>
    <script th:src="@{/layuiadmin/layui/layui.js}"></script>
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
<style>

</style>

<!-- 左边树 -->
<div style="margin-top: 2%;display: inline-block;float:left; width: 20%; height: 800px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
    <ul id="auth-tree"></ul>
</div>


<!-- 数据表格 -->
<div style="float:left; margin-left: 3%;margin-top: 1.2%;width: 60%">
    <!-- 表格 -->
    <table class="auth-table" id="auth-table" lay-filter="auth-table"></table>
</div>


<!-- 多删除添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
        <button id="add" class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <font size="2">当前表: </font>
        <font size="2" color="red" id="leftFont">未选择</font>
    </div>
</script>
<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<script>

    let findAll = ADMIN_CONSOLE + "/dictionaryAdmin/findAll";                       //分页查询
    let deletes = ADMIN_CONSOLE + "/dictionaryAdmin/delete";                        //删除
    let pageUpd = ADMIN_CONSOLE + "/page/console_dictionary_dictionaryUpd";         //编辑弹出
    let pageAdd = ADMIN_CONSOLE + "/page/console_dictionary_dictionaryAdd";         //添加弹出
    let findByType = ADMIN_CONSOLE + "/dictionaryAdmin/findByType";                 //字典查询
    let tablesJson = ajaxGet(findByType + "?type=root");                            //获得字典类型（root）左菜单

    let addTips = ["600px", "400px", "添加"];   //添加弹出层大小，名称
    let updTips = ["600px", "400px", "修改"];   //修改弹出层大小，名称
    var leftFont = "未选择";                    //左边菜单当前选中名称 leftFont
    layui.config({
        base: '../treetable-lay/module/' //静态资源所在路径
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable', 'element', 'tree', 'form'], function () {
        let tree = layui.tree
            , table = layui.table
            , treetable = layui.treetable
            , form = layui.form
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        // 初始化左边数据
        showTree(tree, table);
        // 初始化右边 table 数据
        tableRender(table);

        /**
         * 工具栏事件（多删除 || 添加）
         * toolbar = script的 id
         * auth-table = 数据表格id/lay-filter
         */
        table.on('toolbar(auth-table)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            //多删除
            if (obj.event === "delAll") {
                let ids = new Array();
                let data = checkStatus.data;
                for (let i = 0; i < data.length; i++) {
                    ids[i] = data[i].id;
                }
                if (ids.length > 0) {
                    layer.msg('你确定要删除么？', {
                        time: 0
                        , btn: ['必须删', '不删了']
                        , yes: function (index) {
                            ajaxPost(deletes, {ids: ids});
                            //执行重载
                            table.reload('auth-table', {
                                page: {
                                    curr: $(".layui-laypage-skip .layui-input").val() //页数
                                }
                            }, 'data');
                            layer.msg('操作成功');
                        }
                    });
                }
            }
            //添加
            if (obj.event === "add") {
                if (leftFont === "未选择") {
                    layer.tips('请选择字典类型', '#add');
                    return;
                }
                tipsWindown(pageAdd, addTips[0], addTips[1], addTips[2]);
            }
        });


        /**
         * 条件搜索，重载数据
         */
        let $ = layui.$, active = {
            //搜索
            reload: function () {
                table.reload('auth-table', {
                    page: {
                        curr: 1  //页数
                    }
                    , where: {
                        id: $("#id").val()
                    }
                }, 'data');
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /**
         * 监听数据表格内按钮（编辑 || 删除）
         * tool = 表格内按钮
         * auth-table =表格名
         */
        table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            //菜单添加
            if (obj.event === 'edit') {
                tipsWindown(pageUpd, updTips[0], updTips[1], updTips[2]);
            }
            //删除
            if (obj.event === 'del') {
                tipsDelete(deletes, {ids: [data.id]}, obj);
            }
        });
    });


    /**
     * TODO    左角色列表
     *
     * @date  2019/11/16 0016 16:56
     * @return
     */
    function showTree(tree, table) {
        //左边角色菜单数据
        tree({
            elem: '#auth-tree'
            , click: function (item) {
                if (item.id === 0) {
                    return;
                }
                //当前选中
                leftFont = item.name;
                //重载数据
                tableRender(table, leftFont);
                //当前表展示
                $("#leftFont").html(leftFont);
                //置空临时保存数据
                checkData = null;
                //layer.msg("tabId=" + tabId + "   roleId=" + roleId+" --"+   item.name);
            }
            , nodes: [ //节点
                {
                    name: '字典类型'
                    , id: 0
                    , spread: true
                    , children: tablesJson.data  //角色数据
                }
            ]

        });
        //生成一个模拟树
        let createTree = function (node, start) {
            node = node || function () {
                let arr = [];
                for (let i = 1; i < 10; i++) {
                    arr.push({
                        name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                    });
                }
                return arr;
            }();
            start = start || 1;
            layui.each(node, function (index, item) {
                if (start < 10 && index < 9) {
                    let child = [
                        {
                            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                        }
                    ];
                    node[index].children = child;
                    createTree(child, index + start + 1);
                }
            });
            return node;
        };
    }

    function tableRender(table, leftFont) {
        table.render({
            elem: '#auth-table'
            , url: findAll
            , toolbar: '#toolbarDemo'
            , title: 'codeDame'
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'id'}
                    , {field: 'type', title: '字典分类'}
                    , {field: 'key', title: '搜索值'}
                    , {field: 'value', title: '展示值'}
                    , {field: 'desc', title: '描叙'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
                ]
            ]
            , where: {type: leftFont}
            , page: pageJson
        });
    }

    /**
     * TODO    设置左菜单选中状态
     * @date  2019/11/16 0016 17:22
     */
    $("body").on("mousedown", ".layui-tree a", function () {
        if (!$(this).siblings('ul').length) {
            $(".layui-tree a cite").css('color', '#333');
            $(this).find('cite').css('color', '#009688');
        }
    });
    //当前行数据记录,弹出层获取回填值
    var data = "";
</script>
</body>
</html>
